<template>
<div class="tpl38-title">
  <div
    class="modulePadding"
    :style="`padding-top:${tplItemData.modulePadding}px;padding-bottom:${tplItemData.modulePadding}px;`">
    <div class="diytitle47">
      <p
        v-for="(item, index) in tplItemData.dataset" :key="index"
        class="j-title"
        :style="`text-align:left;color: ${item.titleColor ? item.titleColor : '#1a1a1a'}`">
        <i :style="`background-image:url(${item.pic});`"></i><span>{{ item.showtitle }}</span></p>
    </div>
  </div>
</div>

</template>

<script>
import Vue from 'vue'
export default Vue.extend({
  props: {
    tplItemData: {
      type: Object,
      default() {
        return {

        }
      }
    }
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin";
.tpl38-title{
  //47模板服务承诺
  .diytitle47{
    display:flex;
    display:-webkit-box;
    display:-webkit-flex;
    justify-content: space-between;
    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    p{
      font-size:26px;
      line-height:2;
      display:flex;
      display:-webkit-box;
      display:-webkit-flex;
      align-items: center;
      -webkit-align-items:center;
      -moz-align-items: center;
      i{
        width:28px;
        height:28px;
        margin-right:12px;
        background-repeat:no-repeat;
        background-size:100%;
      }
      
    }
  }
}
</style>
